---
slug: mdx-blog-post
title: MDX Blog Post
authors: [guojq]
tags: [docusaurus]
---

Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).

:::tip

Use the power of React to create interactive blog posts.

:::

{/* truncate */}

For example, use JSX to create an interactive button:

```js
<button onClick={() => alert('button clicked!')}>Click me!</button>
```

<button onClick={() => alert('button clicked!')}>Click me!</button>

<div style={{ color: 'red', fontSize: '20px' }}>
  这段文字会显示为红色，字体大小为20px
</div>

````js
javascript:(function () { let e = document.createElement("div"); e.style = `position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;background:#fff;padding:24px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.2);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans',sans-serif;min-width:320px;border:1px solid rgba(0,0,0,0.1);user-select:none;cursor:move%60; e.innerHTML = %60<div id="modal-header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #eee"> <h3 style="margin:0;font-size:18px;color:#333">动态环境访问</h3><button id="close-btn" style="background:none;border:none;font-size:18px;cursor:pointer;color:#999;padding:0">×</button> </div> <form id="dynamic-bookmark-form"> <div style="margin-bottom:16px"><label style="display:block;margin-bottom:12px;font-size:14px;color:#555">环境：</label> <div style="display:flex;flex-direction: row;gap:8px;flex-wrap: wrap;"><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="radio" name="env" value="dev" checked style="accent-color:#007bff">dev</label><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="radio" name="env" value="test" style="accent-color:#007bff">test</label><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="radio" name="env" value="prod" style="accent-color:#007bff">prod</label></div> </div> <div style="margin-bottom:24px"><label style="display:block;margin-bottom:12px;font-size:14px;color:#555">应用：</label> <div style="display:flex;flex-direction: row;gap:8px;flex-wrap: wrap;"><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="radio" name="app" value="api-gateway" checked style="accent-color:#007bff"> API Gateway</label><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="radio" name="app" value="user-service" style="accent-color:#007bff"> User Service</label><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="radio" name="app" value="order-service" style="accent-color:#007bff"> Order Service</label><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="radio" name="app" value="admin" style="accent-color:#007bff"> Admin Console</label></div> </div> <div style="display:flex;gap:12px"><button type="submit" style="flex:1;padding:12px;background:#007bff;color:white;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background 0.2s">跳转</button><button type="button" id="cancel-btn" style="flex:1;padding:12px;background:#f0f0f0;color:#555;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background 0.2s">取消</button> </div> </form>%60; document.body.appendChild(e); let t = !1, n, o; const r = e.querySelector("#modal-header"); r.addEventListener("mousedown", (a) => { t = !0; const i = e.getBoundingClientRect(); n = a.clientX - i.left, o = a.clientY - i.top, e.style.cursor = "grabbing", e.style.userSelect = "none" }), document.addEventListener("mousemove", (a) => { if (!t) return; e.style.left = a.clientX - n + "px", e.style.top = a.clientY - o + "px", e.style.transform = "none" }), document.addEventListener("mouseup", () => { t = !1, e.style.cursor = "move" }), e.querySelector("#close-btn").addEventListener("click", () => { e.remove() }), e.querySelector("#cancel-btn").addEventListener("click", () => { e.remove() }), document.getElementById("dynamic-bookmark-form").onsubmit = function (a) { a.preventDefault(); const i = document.querySelector('input[name="env"]:checked').value, d = document.querySelector('input[name="app"]:checked').value, c = %60https://${i}.company.com/${d}%60; window.open(c, "_blank"); e.remove() } })();

```


